<template>
  <!-- 视图部分 -->
  <div>
    <van-nav-bar title="购物车"></van-nav-bar>
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <div class="item" v-for="item in list" :key="item.goods_id">
        <div class="item-left">
          <van-checkbox :name="item.goods_id"></van-checkbox>
        </div>
        <div class="item-rign">
          <van-card
            :price="item.goods_price"
            :title="item.goods_name"
            :thumb="item.goods_img"
          >
            <template #bottom>
              <van-stepper v-model="item.goods_count" />
            </template>
          </van-card>
        </div>
      </div>
      <!-- <div class="item">
        <div class="item-left">
          <van-checkbox name="b"></van-checkbox>
        </div>
        <div class="item-rign">
          <van-card
            price="0.03"
            title="雅诗兰黛（Estee Lauder）新版ANR特润修护小棕瓶精华眼霜 15ml"
            thumb="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/81bf23964ae772845e611a5f82e6a5625c2dccff.jpeg?sign=e4fe384e190499ccdefd4458eff3197a&t=606eb761"
          >
            <template #bottom>
              <van-stepper v-model="value2" />
            </template>
          </van-card>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <van-checkbox name="c"></van-checkbox>
        </div>
        <div class="item-rign">
          <van-card
            price="0.02"
            title="理查德米勒（RM）RM056菲利普马萨联名蓝宝石水晶陀飞轮"
            thumb="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/1898615a87cc664dee6a21488869b0aef3ba50ee.jpeg?sign=83bc6d2297530b1d5e970dbf2406893c&t=606eb815"
          >
            <template #bottom>
              <van-stepper v-model="value3" />
            </template>
          </van-card>
        </div>
      </div>
      <div class="item">
        <div class="item-left">
          <van-checkbox name="d"></van-checkbox>
        </div>
        <div class="item-rign">
          <van-card
            price="0.04"
            title="《我在人间凑数的日子》皮皮虾散文集"
            thumb="https://storage.lynnn.cn/assets/markdown/91147/pictures/2021/04/bde0b57ba45759338bbf9dacd7505b4141904806.jpeg?sign=acb2f992e8b20b39f88928a32128c257&t=606eb869"
          >
            <template #bottom>
              <van-stepper v-model="value4" />
            </template>
          </van-card>
        </div>
      </div> -->
    </van-checkbox-group>
    <div>
      <van-submit-bar
        :price="value1"
        button-text="提交订单"
        @submit="onSubmit"
        tip="您的订单为虚拟订单（支付后不发货），请勿支付大额款项"
        tip-icon="info-o"
      >
        <van-checkbox @click="checkAll(), toggleAll()" v-model="checked"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
// 逻辑部分
import Vue from "vue";
import uri from "@/config/uri";
import {
  NavBar,
  SubmitBar,
  Checkbox,
  CheckboxGroup,
  Card,
  Stepper,
} from "vant";
Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Card);
Vue.use(Stepper);
export default {
  data() {
    return {
      list: [],
      result: [],
      checked: false,
      value1: 0,
      // count: "item.goods_count"
    };
  },
  methods: {
    onSubmit() {
      this.$http
        .get(uri.getPay, {
          params: {
            WIDout_trade_no: WIDdate(new Date()) + WIDrandom(6),
            WIDsubject: "Vue综合练习（胡珏瑞）",
            WIDtotal_fee: (this.value1 / 100).toFixed(2),
          },
        })
        .then((res) => {
          let win = window.open();
          win.document.write(res);
        });
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
      let totalPrice = 0;
      this.list.forEach((item) => {
        totalPrice += item.goods_count * item.goods_price;
      });
      if (this.value1 === 0) {
        this.value1 = totalPrice * 100;
      } else {
        this.value1 = 0;
      }
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
  },
  created() {
    this.$http.get(uri.getGoods).then((ret) => {
      this.list = ret.cartInfo;
      console.log(ret);
    });
  },
};
function WIDrandom(n) {
  var str = "";
  for (var i = 0; i < n; i++) {
    var a = Math.floor(Math.random() * 9);
    str += a;
  }
  return str;
}
function WIDdate() {
  var now = new Date();
  var yy = now.getFullYear();
  var mm = now.getMonth() + 1;
  var dd = now.getDate();
  var hh = now.getHours();
  var min = now.getMinutes();
  var ss = now.getSeconds();
  var clock = yy + "";
  if (mm < 10) clock += "0";
  clock += mm;
  if (dd < 10) clock += "0";
  clock += dd;
  if (hh < 10) clock += "0";
  clock += hh;
  if (min < 10) clock += "0";
  clock += min;
  if (ss < 10) clock += "0";
  clock += ss;
  return clock;
}
</script>

<style scoped>
/* 样式部分 */
.item {
  display: flex;
  width: 100%;
}
.item > .item-left {
  width: 50px;
  display: flex;
  justify-content: center;
}
.item > .item-rign {
  width: 400px;
}
.van-card__bottom > .van-stepper {
  float: right;
}
</style>